<template>
	<view class="calendar">
		<u-skeleton rows="2" titleWidth="100%" titleHeight="150" :loading="loading">
			<block v-for="(iitem,index) in list" :key="index">
				<view class="box">
					<block>
						<view class="item">
							<view class="top_tab start">未开始</view>
							<view class="top_tab">合成中</view>
							<view class="item_cont">
								<image :src="iitem.thumb"></image>
								<view class="cont">
									<view class="title u-line-1">{{iitem.title}}</view>
									<view class="number">
										<text>限量</text>
										<text>{{iitem.all_count}}份</text>
										<text>剩余{{iitem.all_count}}份</text>
									</view>
									<view class="price">结束时间:3天22小时18分52秒</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</block>
			<block v-if="!loading&&list.length<1">
				<Empty text="暂无数据"></Empty>
			</block>
		</u-skeleton>

	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import Empty from "@/components/Empty.vue"
	export default {
		mixins: [mixin],
		components: {
			Empty
		},
		data() {
			return {
				loading: false,
				page: 1,
				pageSize: 10,
				list: [],
			}
		},
		onReady() {

		},
		onLoad() {
			this.gethecheng();

		},
		methods: {
			//
			async gethecheng() {
				let data = await this.$http({
					url: this.$api.getcomlist,
					method: 'GET',
					hideLoading: true,
					data: {
						page: this.page,
						pageSize: this.pageSize
					}

				})
				console.log('[合成列表]', data)
				if (data.code == 200) {
					this.loading = false;
					this.list = data.data.data;
					console.log(this.list);

				} else {
					this.loading = false
				}
			},



		},
		filters: {
			FormatYear(e) {
				// e.substring(5)
				return e.substring(5).replace("-", "月") + '日'
			},
			FormatTime(e) {
				return e.substring(10, 16)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.calendar {
		padding-top: 35rpx;

		.item {
			margin-bottom: 22rpx;
			border-radius: 28rpx;
			position: relative;

			.top_tab {
				position: absolute;
				right: 0;
				top: 0;
				width: 108rpx;
				height: 36rpx;
				background: #F2E0BC;
				border-radius: 2px 20px 2px 20px;
				font-size: 11px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #181512;
				text-align: center;
			}

			.top_tab.start {
				background: #A2A19E;
			}

			.time {
				font-size: 36rpx;
				font-weight: 400;
				color: #FFFFFF;
				padding: 0rpx 28rpx 16rpx 20rpx;
			}

			.item_cont {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: url(../../static/images/bg.png)center/cover no-repeat;

				image {
					width: 238rpx;
					height: 236rpx;
					border-radius: 42rpx;
				}

				.cont {
					width: calc(100% - 238rpx);
					box-sizing: border-box;
					padding: 26rpx 26rpx 26rpx 26rpx;
					border-radius: 5rpx;
					background: url(../../static/ico/bg.png) right top no-repeat;
					background-size: 374rpx 466rpx;
					background-position: 42px 34px;

					.title {
						font-size: 32rpx;
						font-weight: 400;
						color: #FFFFFF;
						margin-bottom: 26rpx;
					}

					.number {
						font-size: 0;
						margin-bottom: 26rpx;

						text {
							font-size: 20rpx;
							font-weight: 400;
							color: #333333;
							padding: 4rpx 14rpx;
							background: #F3E0BC;
							border-radius: 7rpx;
							text-align: center;

							&:nth-child(2) {
								color: #F3E0BC;
								background: #4B4B4C;
								border-radius: 0px 2rpx 2rpx 0px;
							}

							&:nth-child(3) {
								color: #F3E0BC;
								background: #4B4B4C;
								border-radius: 0px 2rpx 2rpx 0px;
								margin-left: 10rpx;
							}
						}
					}

					.price {
						font-size: 28rpx;
						font-weight: 600;
						color: #FFFFFF;
					}
				}
			}

		}

	}
</style>
